<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>My personal website</title>
	<link rel="stylesheet" type="text/css" href='lib/minireset.min.css'>
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_395451_93nu0slni9ttke29.css">
	<link rel="stylesheet" type="text/css" href="css/media.css">
	<link rel="stylesheet" href="lib/animate.min.css">
</head>
<body>
	<div id='page' class="bg-home1">

		<div id="starsBox"></div>


		<header id="header" class="animated fadeInDown">
			<div>
				<div id="h-log">
					<a href="#">
						<i></i>
						<span>Mr.Xu</span>
					</a>
				</div>
				<div id="h-but-nav">
					<span class="h-b-n-up"></span>
					<span class="h-b-n-middle"></span>
					<span class="h-b-n-down"></span>
				</div>
				<nav id="h-nav">
					<ul>
						<li><a class="h-n-use1 dianji1">我的首页</a></li>
						<li><a class="h-n-use3 dianji2">我的作品</a></li>
						<li><a class="h-n-use3 dianji3">关于我的</a></li>
						<li><a class="h-n-use3 dianji4">请联系我</a></li>
					</ul>
				</nav>
			</div>
		</header><!-- /header -->

		<main id="main">
			<div class="m-content">
				<div class="m-c-wrap">
					<!-- 我的首页 -->
					<div class="m-c-w-home none2 ">
						<div class="m-c-w-h-container animated pulse">
							<p>HI !  My Name Is 许永恒</p>
							<p>一名前端工程师</p>
							<span>志向和热爱是伟大行为的双翼 --- 歌德</span>
							<a class="m-c-w-h-c-left">更多作品</a>
							<a class="m-c-w-h-c-last">请联系我</a>
						</div>
					</div>
					<!-- 我的作品 -->
					<div class="m-c-w-creation none1">
						<div class="m-c-w-c-left animated fadeInLeft">
							<div class="m-c-w-c-l-left"><a href="http://reverie.club/Charging-pile/index.html">
								<h2>公共充电桩前端交互</h2>
								<p class="m-c-w-c-l-l-1">一款智能电动汽车公共充电桩前端交互页面，运用Swiper框架。全屏切换/动画载入/等</p></a>
							</div>
							<div class="m-c-w-c-l-left"><a href="https://x751685875.github.io/meizu/index.html">
								<h2>电商首页/详情页</h2>
								<p class="m-c-w-c-l-l-1">纯手写Jquery,编写魅族首页/详情页(PC+移动端)
								电商放大镜/轮播图/响应式分析PC or 移动/DOM动画</p></a>
							</div>
						</div>
						<div class="m-c-w-c-right animated fadeInRight">
							<div class="m-c-w-c-l-right"><a href="https://x751685875.github.io/Responsive-website/src/index.html">
								<h2>企业/金融网站</h2>
								<p class="m-c-w-c-l-l-1">Bootstrap+Jquery 速写企业类/金融类网站
								响应式布局/Bootstrap框架</p></a>
							</div>
							<div class="m-c-w-c-l-right"><a href="http://reverie.club/pos/dist/index.html">
								<h2>餐饮店POS系统</h2>
								<p class="m-c-w-c-l-l-1">由Vue2.0 + ES6 + Vue-router + Vue-cli + Webpack打造的餐饮店POS系统</p></a>
							</div>
						</div>
						<a class="m-c-w-c-github animated pulse" href="https://github.com/x751685875">更多请移步GitHub</a>
					</div>
					<!-- 关于我的 -->
					<div class="m-c-w-home none1  animated pulse">
						<div class="m-c-w-h-container animated rotateInDownLeft">
							<p>HI ! My Name Is 许永恒</p>
							<p>现'焦作大学'大三学生</p>
							<span>两年多学习前端经验,多个项目实战编写经验</span>
							<a class="m-c-w-h-c-left1" href="">我的简历</a>
							<a class="m-c-w-h-c-last1">请联系我</a>
						</div>
						<div class="m-c-w-h-right animated rotateInUpRight">
							<p>我的技术链</p>
							<span>HTML5+CSS3 : 精准还原UI设计稿/熟悉兼容性问题</span>
							<span>JavaScript : 熟练掌握JS知识/原型链/闭包等</span>
							<span>JQuery : 熟练手写大部分交互效果和AJAX操作</span>
							<span>Vue : 熟悉Vue操作和语法,使用Vue做过项目</span>
							<span>PS / BootStrap / Less / Python / Ajax / json</span>
						</div>
					</div>
					<!-- 请联系我 -->
					<div class="m-c-w-home none1  animated tada">
						<div class="m-c-w-h-container">
							<p>请联系我</p>
							<p>18年毕业,寻找实习中</p>
							<span><i class="iconfont icon-dianhua"></i> 电话：15039130637</span>
							<span><i class="iconfont icon-qq"></i> QQ：751685875</span>
							<span><i class="iconfont icon-wechat-copy"></i> 微信：xu19970328</span>
							<span><i class="iconfont icon-youxiang"></i> 邮箱：751685875@qq.com</span>
							<span><i class="iconfont icon-dizhi"></i> 地址：河南焦作市焦作大学</span>
						</div>
					</div>
				</div>
			</div>
		</main><!-- /main -->

		<footer id="footer" class="animated fadeInUp">
			<div class="f-left">
				<p>© 2017 Mr.Xu - All Rights Reserved</p>
			</div>
			<nav class="f-right">
				<ul>
					<li class="animated rotateIn" title="github"><a href="https://github.com/x751685875"><p class="f-r-t"></p><i class="iconfont icon-github"></i><p class="f-r-b"></p></a></li>
					<li class="animated rotateIn" title="博客"><a href="http://reverie.club/"><p class="f-r-t"></p><i class="iconfont icon-blogger"></i><p class="f-r-b"></p></a></li>
					<li class="animated rotateIn" title="知乎"><a href="https://www.zhihu.com/people/15039130637"><p class="f-r-t"></p><i class="iconfont icon-zhihu"></i><p class="f-r-b"></p></a></li>
					<li class="animated rotateIn" title="简历"><a href=""><p class="f-r-t"></p><i class="iconfont icon-jianli1"></i><p class="f-r-b"></p></a></li>
					<li class="animated rotateIn" title="邮箱"><a><p class="f-r-t"></p><i class="iconfont icon-youxiang dianji"></i><p class="f-r-b"></p></a></li>
					<li class="animated rotateIn" title="QQ"><a><p class="f-r-t"></p><i class="iconfont icon-qq dianji"></i><p class="f-r-b"></p></a></li>
					<li class="animated rotateIn" title="微信"><a><p class="f-r-t"></p><i class="iconfont icon-wechat-copy dianji"></i><p class="f-r-b"></p></a></li>
					<li class="animated rotateIn" title="手机"><a><p class="f-r-t"></p><i class="iconfont icon-dianhua dianji"></i><p class="f-r-b"></p></a></li>
				</ul>
			</nav>
		</footer><!-- /footer -->

	</div>

	<script type="text/javascript" src="lib/jquery.min.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src='js/starsBox.js'></script>
</body>
</html>